<template>
  <div class="box">
    <h1>pinia</h1>
    <div class="container">
      <Child></Child>
      <Child1></Child1>
    </div>
  </div>
</template>

<script setup lang="ts">
import Child from "./Child.vue";
import Child1 from "./Child1.vue";
//vuex:集中式管理状态容器,可以实现任意组件之间通信！！！
//核心概念:state、mutations、actions、getters、modules

/**
 * vuex是什么， state,getters,mutations,actions,modules的用途和用法
 vuex 是一个状态管理工具，它采用集中式存储管理应用的所有组件的状态，当有多个组件共享数据时，如果需要构建是一个中大型单页应用，会考虑如何更好地在组件外部管理状态，就使用Vuex 。

 好处：

 ①： 能够在 vuex 中集中管理共享的数据，易于开发和后期维护 ②： 可以做状态管理、采用localstorage保存信息、数据一直存储在用户的客户端中 ③： 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步，能够高效地实现组件之间的数据共享，提高开发效率

 vuex核心：

 state：vuex的基本数据，数据源存放地，数据是响应式的，用于定义共享的数据。

 getter：可以对state进行计算操作，主要用来过滤一些数据，可以在多组件之间复用

 mutation：提交更新数据的方法，唯一 一个可以操作state 中数据的方法，必须是同步的，第一个参数是state，第二个参数是commit传过来的数据

 action：action是用来处理数据的方法变成异步操作的，一般用来发请求，在 action 中写入函数，然后在页面中用store.dispatch调用，然后在 action 中通过commit 去调用 mutation 通过 mutation 去操作state，进行修改数据。

 modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理
 ————————————————
 版权声明：本文为CSDN博主「Yz前端知识」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
 原文链接：https://blog.csdn.net/weixin_45168167/article/details/126367060
 */

//pinia:集中式管理状态容器,可以实现任意组件之间通信！！！
//核心概念:state、actions、getters
//pinia写法:选择式API、组合式API
</script>

<style scoped>
.box {
  width: 600px;
  height: 400px;
  background: skyblue;
}
.container{
  display: flex;
}
</style>